CSS @when Reegel: Tingimusliku Stiili Rakendamise Valdamine

CSS-i maailm areneb pidevalt, pakkudes arendajatele võimsamaid ja paindlikumaid viise veebilehtede stiilimiseks. Üks selline populaarsust koguv funktsioon on @when reegel, tuntud ka kui CSS Conditional Rules Module Level 1. See reegel võimaldab teil rakendada CSS-stiile tingimuslikult, lähtudes konkreetsete tingimuste täitmisest. See on võimas tööriist reageeriva disaini, funktsioonide tuvastamise ja vastupidavamate ning kohandatavamate stiililehtede loomiseks.

Mis on CSS @when Reegel?

@when reegel on tingimuslik at-reegel CSS-is, mis võimaldab teil määratleda stiile, mida rakendatakse ainult siis, kui teatud tingimused on tõesed. Mõelge sellest kui if-lausest oma CSS-i jaoks. Erinevalt meediapäringutest, mis keskenduvad peamiselt vaateakna omadustele (ekraani suurus, orientatsioon jne), pakub @when üldisemat ja laiendatavamat viisi tingimusliku stiilimise käsitlemiseks. See laiendab olemasolevaid tingimuslikke at-reegleid nagu @supports ja @media.

@when Kasutamise Peamised Eelised

• Parem Koodi Loetavus: Kapseldades tingimusliku loogika @when plokkidesse, muudate oma CSS-i lihtsamini mõistetavaks ja hooldatavaks. Konkreetsete stiilirakenduste taga olev kavatsus muutub selgemaks.
• Suurem Paindlikkus: @when suudab käsitleda keerukamaid tingimusi kui traditsioonilised meediapäringud, eriti kui seda kombineerida funktsioonipäringute ja JavaScripti-põhise loogikaga (kasutades CSS-i kohandatud omadusi).
• Lihtsustatud Funktsioonide Tuvastamine: @when integreerub sujuvalt @supports-iga, võimaldades teil rakendada stiile ainult siis, kui konkreetsed brauseri funktsioonid on saadaval. See on progressiivse täiustamise jaoks ülioluline.
• Semantilisem Stiilimine: @when võimaldab teil elemente stiilida nende oleku või konteksti alusel, mis viib semantilisema ja hooldatavama CSS-ini. Näiteks elementide stiilimine andmeatribuutide või JavaScripti poolt määratud kohandatud omaduste alusel.

@when Reegli Süntaks

            @when <condition> {
  /* CSS-reeglid, mida rakendada, kui tingimus on tõene */
}
            

              
                Copy
              
            
          

<condition> võib olla mis tahes kehtiv tõeväärtusavaldis, mis hindab tõeseks või vääraks. See avaldis hõlmab sageli:

• Meediapäringud: Tingimused, mis põhinevad vaateakna omadustel (nt ekraani laius, seadme orientatsioon).
• Funktsioonipäringud (@supports): Tingimused, mis põhinevad brauseri toel konkreetsetele CSS-funktsioonidele.
• Boole'i algebra: Mitme tingimuse kombineerimine loogiliste operaatoritega (and, or, not).

Praktilised Näited @when Kasutamisest

Uurime mõningaid praktilisi näiteid, et illustreerida @when reegli võimsust ja mitmekülgsust.

1. Reageeriv Disain @when ja Meediapäringutega

Kõige levinum @when kasutusjuht on reageeriv disain, kus kohandate stiile ekraani suuruse põhjal. Kuigi meediapäringud suudavad seda ka iseseisvalt saavutada, pakub @when struktureeritumat ja loetavamat lähenemist, eriti keerukate tingimustega tegelemisel.

            @when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}
            

              
                Copy
              
            
          

Selles näites rakendatakse @when plokis olevaid stiile ainult siis, kui ekraani laius on vahemikus 768px ja 1023px (tüüpiline tahvelarvuti suurus). See pakub selget ja lühikest viisi stiilide määratlemiseks konkreetsete vaateakna vahemike jaoks.

Rahvusvahelistamise Märkus: Reageeriv disain on globaalsele publikule ülioluline. Arvestage erinevate ekraanisuurustega erinevates piirkondades. Näiteks on mobiilikasutus mõnes riigis suurem, mis muudab mobiil-eelkõige disaini veelgi olulisemaks.

2. Funktsioonide Tuvastamine @when ja @supports abil

@when saab kombineerida @supports-iga, et rakendada stiile ainult siis, kui brauser toetab konkreetset CSS-funktsiooni. See võimaldab teil oma veebisaiti järk-järgult täiustada, pakkudes paremat kogemust kaasaegsete brauseritega kasutajatele, säilitades samal ajal ühilduvuse vanematega.

            @when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Varustiilid brauseritele, mis ei toeta grid'i */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Kohanda laiust vanematele brauseritele */
  }
}
            

              
                Copy
              
            
          

Siin kasutame @supports-i, et kontrollida, kas brauser toetab CSS Grid Layout'i. Kui toetab, rakendame .container-ile grid-põhiseid stiile. Kui ei, pakume varustiile flexboxi abil, et tagada sarnane paigutus vanemates brauserites.

Globaalse Juurdepääsetavuse Märkus: Funktsioonide tuvastamine on juurdepääsetavuse seisukohast oluline. Vanematel brauseritel võib puududa tugi uuematele ARIA atribuutidele või semantilistele HTML5 elementidele. Pakkuge sobivaid varulahendusi, et tagada sisu juurdepääsetavus.

3. Meediapäringute ja Funktsioonipäringute Kombineerimine

@when tegelik võimsus tuleneb selle võimest kombineerida meediapäringuid ja funktsioonipäringuid, et luua keerukamaid ja nüansseeritumaid tingimuslikke stiilireegleid.

            @when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}
            

              
                Copy
              
            
          

Selles näites on .modal elemendil hägune taust ainult siis, kui ekraani laius on vähemalt 768px ja brauser toetab backdrop-filter omadust. See võimaldab teil luua visuaalselt köitvaid efekte kaasaegsetes brauserites, vältides samal ajal võimalikke jõudlusprobleeme või renderdusvigu vanemates.

4. Stiilimine Kohandatud Omaduste (CSS Muutujate) Põhjal

@when saab kasutada ka koos CSS-i kohandatud omadustega (tuntud ka kui CSS-muutujad), et luua dünaamilist ja olekupõhist stiilimist. Saate kasutada JavaScripti kohandatud omaduse väärtuse värskendamiseks ja seejärel kasutada @when-i erinevate stiilide rakendamiseks selle väärtuse põhjal.

Esmalt määratlege kohandatud omadus:

            :root {
  --theme-color: #007bff; /* Vaikimisi teema värv */
  --is-dark-mode: false;
}

            

              
                Copy
              
            
          

Seejärel kasutage @when-i stiilide rakendamiseks kohandatud omaduse väärtuse põhjal:

            @when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

            

              
                Copy
              
            
          

Lõpuks kasutage JavaScripti, et lülitada --is-dark-mode kohandatud omaduse väärtust:

            document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});
            

              
                Copy
              
            
          

See võimaldab kasutajatel vahetada heleda ja tumeda teema vahel, kusjuures CSS värskendub dünaamiliselt vastavalt kohandatud omaduse väärtusele. Pange tähele, et CSS-muutujate otsene võrdlus @when-is ei pruugi olla kõigis brauserites universaalselt toetatud. Selle asemel peate võib-olla kasutama lahendust meediapäringuga, mis kontrollib nullist erinevat väärtust:

            @when ( --is-dark-mode > 0 ) { ... }
            

              
                Copy
              
            
          

Siiski veenduge, et kohandatud omadusel oleks selle toimimiseks numbriline väärtus.

Juurdepääsetavuse Märkus: Alternatiivsete teemade (nt tume režiim) pakkumine on juurdepääsetavuse seisukohast ülioluline. Nägemispuudega kasutajad võivad kasu saada kõrge kontrastsusega teemadest. Veenduge, et teie teemavahetus oleks juurdepääsetav klaviatuuri ja ekraanilugejate kaudu.

5. Stiilimine Andmeatribuutide Põhjal

Saate kasutada @when-i ka andmeatribuutidega, et stiilida elemente nende andmeväärtuste põhjal. See võib olla kasulik dünaamiliste liideste loomisel, kus elementide välimus muutub vastavalt kasutaja interaktsioonile või andmete värskendustele.

Näiteks oletame, et teil on ülesannete loend ja igal ülesandel on data-status atribuut, mis näitab selle olekut (nt "todo", "in-progress", "completed"). Saate kasutada @when-i iga ülesande erinevaks stiilimiseks vastavalt selle olekule.

            [data-status="todo"] {
  /* Vaikimisi stiilid todo ülesannetele */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}
            

              
                Copy
              
            
          

Märkus: attribute() testtingimuse tugi võib olla piiratud või mitte täielikult rakendatud kõigis brauserites praegu. Testige alati põhjalikult.

Brauseri Ühilduvus ja Polüfillid

2024. aasta lõpu seisuga on brauseritugi @when reeglile endiselt arenemas. Kuigi paljud kaasaegsed brauserid toetavad põhifunktsionaalsust, ei pruugi mõned vanemad brauserid seda teha. Seetõttu on ülioluline kontrollida ühilduvustabeleid ja kasutada vajadusel sobivaid varulahendusi või polüfille.

Konsulteerige alati ressurssidega nagu Can I use..., et kontrollida @when ja sellega seotud funktsioonide praegust brauseritoe staatust.

Parimad Praktikad @when Kasutamiseks

• Hoidke Tingimused Lihtsad: Vältige liiga keerulisi tingimusi @when plokkides. Jagage keeruline loogika väiksemateks, paremini hallatavateks tükkideks.
• Pakkuge Varulahendusi: Pakkuge alati varustiile brauseritele, mis ei toeta teie @when reeglites kasutatavaid funktsioone. See tagab ühtlase kogemuse erinevates brauserites.
• Testige Põhjalikult: Testige oma CSS-i erinevates brauserites ja seadmetes, et tagada teie @when reeglite ootuspärane toimimine.
• Kasutage Tähendusrikkaid Kommentaare: Lisage oma CSS-ile kommentaare, et selgitada iga @when reegli eesmärki ja tingimusi, millel see põhineb. See muudab teie koodi lihtsamini mõistetavaks ja hooldatavaks.
• Kaaluge Jõudlust: Vältige @when reeglite liigset kasutamist, kuna need võivad potentsiaalselt mõjutada jõudlust. Optimeerige oma CSS-i, et minimeerida hinnatavate reeglite arvu.

Kokkuvõte

@when reegel on võimas täiendus CSS-i tööriistakasti, pakkudes arendajatele paindlikumat ja väljendusrikkamat viisi stiilide tingimuslikuks rakendamiseks. Kombineerides seda meediapäringute, funktsioonipäringute ja CSS-i kohandatud omadustega, saate luua vastupidavamaid, kohandatavamaid ja hooldatavamaid stiililehti. Kuigi brauseritugi on endiselt arenemas, on @when funktsioon, mida tasub uurida ja oma kaasaegsesse veebiarenduse töövoogu lisada.

Kuna veeb areneb jätkuvalt, on selliste funktsioonide nagu @when valdamine hädavajalik kaasahaaravate, juurdepääsetavate ja jõudluspõhiste kogemuste loomiseks kasutajatele üle maailma. Võtke omaks tingimusliku stiilimise jõud ja avage uusi võimalusi oma CSS-arenduses.